<template>
  <div class="error-404">
    <div class="error-banner">
      <svg xmlns="http://www.w3.org/2000/svg" width="312">
        <g id="group-1-cube-1">
          <path
            fill="#1D2125"
            d="M210.6 0l-20 11.2v22.4l20 11.2 20-11.2V11.2L210.6 0z"
          />
          <path
            fill="#DADEDE"
            d="M210.6 5.3l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-1-cube-2">
          <path
            fill="#1D2125"
            d="M170.6 22.4l-20 11.2V56l20 11.2 20-11.2V33.6l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M170.6 27.7l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-1-cube-3">
          <path
            fill="#1D2125"
            d="M230.6 11.2l-20 11.2v22.4l20 11.2 20-11.2V22.4l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M230.6 16.5L215.3 25l15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-1-cube-4">
          <path
            fill="#1D2125"
            d="M250.6 22.4l-20 11.2V56l20 11.2 20-11.2V33.6l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M250.6 27.7l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-1-cube-5">
          <path
            fill="#1D2125"
            d="M190.6 33.6l-20 11.2v22.4l20 11.2 20-11.2V44.8l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M190.6 38.9l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-1-cube-6">
          <path
            fill="#1D2125"
            d="M230.6 33.6l-20 11.2v22.4l20 11.2 20-11.2V44.8l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M230.6 38.9l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-1-cube-7">
          <path
            fill="#1D2125"
            d="M210.6 44.8l-20 11.2v22.4l20 11.2 20-11.2V56l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M210.6 50.1l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-1-cube-8">
          <path
            fill="#1D2125"
            d="M270.6 33.6l-20 11.2v22.4l20 11.2 20-11.2V44.8l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M270.6 38.9l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-1-cube-9">
          <path
            fill="#1D2125"
            d="M290.6 44.8l-20 11.2v22.4l20 11.2 20-11.2V56l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M290.6 50.1l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-2-cube-1">
          <path
            fill="#1D2125"
            d="M135.3 42.2l-20 11.2v22.4l20 11.2 20-11.2V53.4l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M135.3 47.5L120 56l15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-2-cube-2">
          <path
            fill="#1D2125"
            d="M115.3 53.4l-20 11.2V87l20 11.2 20-11.2V64.6l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M115.3 58.7L100 67.2l15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-2-cube-3">
          <path
            fill="#1D2125"
            d="M95.3 64.6l-20 11.2v22.4l20 11.2 20-11.2V75.8l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M95.3 69.9L80 78.4 95.3 87l15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-2-cube-4">
          <path
            fill="#1D2125"
            d="M155.3 53.4l-20 11.2V87l20 11.2 20-11.2V64.6l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M155.3 58.7L140 67.2l15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-2-cube-5">
          <path
            fill="#1D2125"
            d="M175.3 64.6l-20 11.2v22.4l20 11.2 20-11.2V75.8l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M175.3 69.9L160 78.4l15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-2-cube-6">
          <path
            fill="#1D2125"
            d="M115.3 75.8L95.3 87v22.4l20 11.2 20-11.2V87l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M115.3 81.1L100 89.6l15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-2-cube-7">
          <path
            fill="#1D2125"
            d="M135.3 87l-20 11.2v22.4l20 11.2 20-11.2V98.2l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M135.3 92.3l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-2-cube-8">
          <path
            fill="#1D2125"
            d="M155.3 98.2l-20 11.2v22.4l20 11.2 20-11.2v-22.4l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M155.3 103.5L140 112l15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-2-cube-9">
          <path
            fill="#1D2125"
            d="M195.3 75.8l-20 11.2v22.4l20 11.2 20-11.2V87l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M195.3 81.1L180 89.6l15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-2-cube-10">
          <path
            fill="#1D2125"
            d="M215.3 87l-20 11.2v22.4l20 11.2 20-11.2V98.2l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M215.3 92.3l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-2-cube-11">
          <path
            fill="#1D2125"
            d="M195.3 98.2l-20 11.2v22.4l20 11.2 20-11.2v-22.4l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M195.3 103.5L180 112l15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-2-cube-12">
          <path
            fill="#1D2125"
            d="M175.3 109.4l-20 11.2V143l20 11.2 20-11.2v-22.4l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M175.3 114.7l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-3-cube-1">
          <path
            fill="#1D2125"
            d="M60 84.4L40 95.6V118l20 11.2L80 118V95.6L60 84.4z"
          />
          <path
            fill="#DADEDE"
            d="M60 89.7l-15.3 8.5 15.3 8.6 15.3-8.6L60 89.7"
          />
        </g>
        <g id="group-3-cube-2">
          <path
            fill="#1D2125"
            d="M20 106.8L0 118v22.4l20 11.2 20-11.2V118l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M20 112.1l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-3-cube-3">
          <path
            fill="#1D2125"
            d="M80 95.6l-20 11.2v22.4l20 11.2 20-11.2v-22.4L80 95.6z"
          />
          <path
            fill="#DADEDE"
            d="M80 100.9l-15.3 8.5L80 118l15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-3-cube-4">
          <path
            fill="#1D2125"
            d="M100 106.8L80 118v22.4l20 11.2 20-11.2V118l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M100 112.1l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-3-cube-5">
          <path
            fill="#1D2125"
            d="M40 118l-20 11.2v22.4l20 11.2 20-11.2v-22.4L40 118z"
          />
          <path
            fill="#DADEDE"
            d="M40 123.3l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-3-cube-6">
          <path
            fill="#1D2125"
            d="M80 118l-20 11.2v22.4l20 11.2 20-11.2v-22.4L80 118z"
          />
          <path
            fill="#DADEDE"
            d="M80 123.3l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-3-cube-7">
          <path
            fill="#1D2125"
            d="M60 129.2l-20 11.2v22.4L60 174l20-11.2v-22.4l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M60 134.5L44.7 143l15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-3-cube-8">
          <path
            fill="#1D2125"
            d="M120 118l-20 11.2v22.4l20 11.2 20-11.2v-22.4L120 118z"
          />
          <path
            fill="#DADEDE"
            d="M120 123.3l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
        <g id="group-3-cube-9">
          <path
            fill="#1D2125"
            d="M140 129.2l-20 11.2v22.4l20 11.2 20-11.2v-22.4l-20-11.2z"
          />
          <path
            fill="#DADEDE"
            d="M140 134.5l-15.3 8.5 15.3 8.6 15.3-8.6-15.3-8.5"
          />
        </g>
      </svg>
      <div class="error-message">
        <h2>Not Found.404</h2>
        <p><span>This page doesn't exist.</span></p>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { nextTick, onMounted } from 'vue'

  onMounted(() => {
    nextTick(() => {
      window.scrollTo(0, 0)
    })
  })
</script>

<style scoped>
  .error-404 {
    background: #262b30;
    height: 70vh;
    overflow: visible;
    width: 100%;
  }

  .error-404 {
    overflow: visible;
    text-align: center;
  }

  .error-banner {
    padding: 60px 0 20px;
    position: relative;
    display: inline-block;
    font-family: Helvetica-neue, Helvetica, Arial, sans-serif;
    color: #788392;
  }

  .error-banner svg {
    position: relative;
    overflow: visible;
    z-index: 2;
    transform: translate3d(0, 0, 0);
    margin: 3em;
  }

  .error-banner .error-message {
    margin: 1em 0;
    position: relative;
  }

  .error-banner h2 {
    font-size: 50px;
    font-weight: normal;
    margin: 0;
    animation: 1.5s ease-out fade-in-slowly;
  }

  .error-banner p {
    font-size: 20px;
    margin: 8px;
  }

  .error-banner p span {
    animation: 2s ease-out fade-in-slowly;
  }

  .error-banner svg:hover + .error-message {
    animation: error-party 0.9s linear infinite;
  }

  .error-banner svg:hover + .error-message h2 {
    font-size: 0;
  }

  .error-banner svg:hover + .error-message h2:before {
    font-size: 20px;
    content: 'On the bright side, you found';
  }

  .error-banner svg:hover + .error-message p {
    font-size: 0;
  }

  .error-banner svg:hover + .error-message p:after {
    font-size: 50px;
    line-height: 1.2em;
    content: 'WELCOME TO THE BLOG!';
  }

  .error-banner svg:hover + .error-message p {
    animation: zbounce 0.5s linear infinite;
  }

  [id$='cube-1'],
  [id$='cube-13'],
  [id$='cube-25'] {
    animation: drop-cube-1 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  [id$='cube-1'] path,
  [id$='cube-13'] path,
  [id$='cube-25'] path {
    animation: fade-cube-1 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  [id$='cube-2'],
  [id$='cube-14'],
  [id$='cube-26'] {
    animation: drop-cube-2 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  [id$='cube-2'] path,
  [id$='cube-14'] path,
  [id$='cube-26'] path {
    animation: fade-cube-2 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  [id$='cube-3'],
  [id$='cube-15'],
  [id$='cube-27'] {
    animation: drop-cube-3 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  [id$='cube-3'] path,
  [id$='cube-15'] path,
  [id$='cube-27'] path {
    animation: fade-cube-3 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  [id$='cube-4'],
  [id$='cube-16'],
  [id$='cube-28'] {
    animation: drop-cube-4 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  [id$='cube-4'] path,
  [id$='cube-16'] path,
  [id$='cube-28'] path {
    animation: fade-cube-4 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  [id$='cube-5'],
  [id$='cube-17'],
  [id$='cube-29'] {
    animation: drop-cube-5 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  [id$='cube-5'] path,
  [id$='cube-17'] path,
  [id$='cube-29'] path {
    animation: fade-cube-5 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  [id$='cube-6'],
  [id$='cube-18'],
  [id$='cube-30'] {
    animation: drop-cube-6 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  [id$='cube-6'] path,
  [id$='cube-18'] path,
  [id$='cube-30'] path {
    animation: fade-cube-6 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  [id$='cube-7'],
  [id$='cube-19'],
  [id$='cube-31'] {
    animation: drop-cube-7 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  [id$='cube-7'] path,
  [id$='cube-19'] path,
  [id$='cube-31'] path {
    animation: fade-cube-7 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  [id$='cube-8'],
  [id$='cube-20'],
  [id$='cube-32'] {
    animation: drop-cube-8 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  [id$='cube-8'] path,
  [id$='cube-20'] path,
  [id$='cube-32'] path {
    animation: fade-cube-8 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  [id$='cube-9'],
  [id$='cube-21'],
  [id$='cube-33'] {
    animation: drop-cube-9 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  [id$='cube-9'] path,
  [id$='cube-21'] path,
  [id$='cube-33'] path {
    animation: fade-cube-9 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  [id$='cube-10'],
  [id$='cube-22'],
  [id$='cube-34'] {
    animation: drop-cube-10 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  [id$='cube-10'] path,
  [id$='cube-22'] path,
  [id$='cube-34'] path {
    animation: fade-cube-10 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  [id$='cube-11'],
  [id$='cube-23'],
  [id$='cube-35'] {
    animation: drop-cube-11 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  [id$='cube-11'] path,
  [id$='cube-23'] path,
  [id$='cube-35'] path {
    animation: fade-cube-11 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  [id$='cube-12'],
  [id$='cube-24'],
  [id$='cube-36'] {
    animation: drop-cube-12 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  [id$='cube-12'] path,
  [id$='cube-24'] path,
  [id$='cube-36'] path {
    animation: fade-cube-12 0.9s cubic-bezier(0.19, 1, 0.32, 1);
  }

  svg:hover [id$='cube-1'] path,
  svg:hover [id$='cube-13'] path,
  svg:hover [id$='cube-25'] path {
    animation: fade-out-cube-1 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
  }

  svg:hover [id$='cube-2'] path,
  svg:hover [id$='cube-14'] path,
  svg:hover [id$='cube-26'] path {
    animation: fade-out-cube-2 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
  }

  svg:hover [id$='cube-3'] path,
  svg:hover [id$='cube-15'] path,
  svg:hover [id$='cube-27'] path {
    animation: fade-out-cube-3 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
  }

  svg:hover [id$='cube-4'] path,
  svg:hover [id$='cube-16'] path,
  svg:hover [id$='cube-28'] path {
    animation: fade-out-cube-4 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
  }

  svg:hover [id$='cube-5'] path,
  svg:hover [id$='cube-17'] path,
  svg:hover [id$='cube-29'] path {
    animation: fade-out-cube-5 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
  }

  svg:hover [id$='cube-6'] path,
  svg:hover [id$='cube-18'] path,
  svg:hover [id$='cube-30'] path {
    animation: fade-out-cube-6 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
  }

  svg:hover [id$='cube-7'] path,
  svg:hover [id$='cube-19'] path,
  svg:hover [id$='cube-31'] path {
    animation: fade-out-cube-7 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
  }

  svg:hover [id$='cube-8'] path,
  svg:hover [id$='cube-20'] path,
  svg:hover [id$='cube-32'] path {
    animation: fade-out-cube-8 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
  }

  svg:hover [id$='cube-9'] path,
  svg:hover [id$='cube-21'] path,
  svg:hover [id$='cube-33'] path {
    animation: fade-out-cube-9 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
  }

  svg:hover [id$='cube-10'] path,
  svg:hover [id$='cube-22'] path,
  svg:hover [id$='cube-34'] path {
    animation: fade-out-cube-10 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
  }

  svg:hover [id$='cube-11'] path,
  svg:hover [id$='cube-23'] path,
  svg:hover [id$='cube-35'] path {
    animation: fade-out-cube-11 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
  }

  svg:hover [id$='cube-12'] path,
  svg:hover [id$='cube-24'] path,
  svg:hover [id$='cube-36'] path {
    animation: fade-out-cube-12 0.7s cubic-bezier(0.19, 1, 0.32, 1) infinite;
  }

  @keyframes drop-cube-1 {
    0%,
    7% {
      transform: translateY(300px);
    }
    100% {
      transform: translateY(0);
    }
  }

  @keyframes fade-cube-1 {
    0%,
    7% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fade-out-cube-1 {
    0%,
    3% {
      opacity: 1;
    }
    97% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes drop-cube-2 {
    0%,
    14% {
      transform: translateY(300px);
    }
    100% {
      transform: translateY(0);
    }
  }

  @keyframes fade-cube-2 {
    0%,
    14% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fade-out-cube-2 {
    0%,
    6% {
      opacity: 1;
    }
    94% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes drop-cube-3 {
    0%,
    21% {
      transform: translateY(300px);
    }
    100% {
      transform: translateY(0);
    }
  }

  @keyframes fade-cube-3 {
    0%,
    21% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fade-out-cube-3 {
    0%,
    9% {
      opacity: 1;
    }
    91% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes drop-cube-4 {
    0%,
    28% {
      transform: translateY(300px);
    }
    100% {
      transform: translateY(0);
    }
  }

  @keyframes fade-cube-4 {
    0%,
    28% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fade-out-cube-4 {
    0%,
    12% {
      opacity: 1;
    }
    88% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes drop-cube-5 {
    0%,
    35% {
      transform: translateY(300px);
    }
    100% {
      transform: translateY(0);
    }
  }

  @keyframes fade-cube-5 {
    0%,
    35% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fade-out-cube-5 {
    0%,
    15% {
      opacity: 1;
    }
    85% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes drop-cube-6 {
    0%,
    42% {
      transform: translateY(300px);
    }
    100% {
      transform: translateY(0);
    }
  }

  @keyframes fade-cube-6 {
    0%,
    42% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fade-out-cube-6 {
    0%,
    18% {
      opacity: 1;
    }
    82% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes drop-cube-7 {
    0%,
    49% {
      transform: translateY(300px);
    }
    100% {
      transform: translateY(0);
    }
  }

  @keyframes fade-cube-7 {
    0%,
    49% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fade-out-cube-7 {
    0%,
    21% {
      opacity: 1;
    }
    79% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes drop-cube-8 {
    0%,
    56% {
      transform: translateY(300px);
    }
    100% {
      transform: translateY(0);
    }
  }

  @keyframes fade-cube-8 {
    0%,
    56% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fade-out-cube-8 {
    0%,
    24% {
      opacity: 1;
    }
    76% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes drop-cube-9 {
    0%,
    63% {
      transform: translateY(300px);
    }
    100% {
      transform: translateY(0);
    }
  }

  @keyframes fade-cube-9 {
    0%,
    63% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fade-out-cube-9 {
    0%,
    27% {
      opacity: 1;
    }
    73% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes drop-cube-10 {
    0%,
    70% {
      transform: translateY(300px);
    }
    100% {
      transform: translateY(0);
    }
  }

  @keyframes fade-cube-10 {
    0%,
    70% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fade-out-cube-10 {
    0%,
    30% {
      opacity: 1;
    }
    70% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes drop-cube-11 {
    0%,
    77% {
      transform: translateY(300px);
    }
    100% {
      transform: translateY(0);
    }
  }

  @keyframes fade-cube-11 {
    0%,
    77% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fade-out-cube-11 {
    0%,
    33% {
      opacity: 1;
    }
    67% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes drop-cube-12 {
    0%,
    84% {
      transform: translateY(300px);
    }
    100% {
      transform: translateY(0);
    }
  }

  @keyframes fade-cube-12 {
    0%,
    84% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fade-out-cube-12 {
    0%,
    36% {
      opacity: 1;
    }
    64% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes error-party {
    0% {
      color: #8e55dd;
    }
    20% {
      color: #967adc;
    }
    40% {
      color: #fef0bd;
    }
    60% {
      color: #d4eef7;
    }
    80% {
      color: #82c1ed;
    }
    100% {
      color: #5d9cec;
    }
  }

  @keyframes fade-in-slowly {
    0% {
      opacity: 0;
    }
    80% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes zbounce {
    0%,
    100% {
      transform: scale(0.95, 0.95);
    }
    50% {
      transform: scale(1, 1);
    }
  }
</style>
